<template>
    <div class="drawer-main">
      <el-drawer
        ref="drawerMain"
        :title="drawerTitle"
        :visible.sync="drawer"
        direction="rtl"
        size="78%"
        :wrapperClosable="false"
        @closed="handleClose"
      >
        <div class="drawer-content">
          <div class="detail-info-main">
            <div class="info-main">
              <!-- <div class="info-item">
                <span class="info-label">{{ $i18n.t("bomBuyer.bomVin") }}：</span>
                <span class="info-text">{{ materialDetail.vinCode||'-' }}</span>
              </div> -->
              <div class="info-item">
                <span class="info-label">{{ $i18n.t("bomBuyer.materialName") }}：</span>
                <span class="info-text">{{ materialDetail.materialName||'-' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">数量：</span>
                <span class="info-text">{{ materialDetail.materialNum||'-' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">包装单位：</span>
                <span class="info-text">{{ materialDetail.demandPackUnit||'-' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">物料需求创建时间：</span>
                <span class="info-text">{{ materialDetail.createTime }}</span>
              </div>
              
              <div class="info-item" v-if="materialDetail.materialPhotoUrl">
                <p class="info-label link" @click="showImgViewer(null)">查看图片</p>
              </div>
            </div>
          </div>
          <el-form ref="isProvideFormRef" label-width="87px">
            <el-form-item label="是否有货：">
              <el-checkbox-group 
              v-model="isProvideTypes" 
              :disabled="true"
              @change="isProvideChange">
                <!-- <el-checkbox label="1">原厂件</el-checkbox>
                <el-checkbox label="4">拆车件</el-checkbox> -->
                <el-checkbox label="2">品牌件</el-checkbox>
                <!-- <el-checkbox label="3" >其他</el-checkbox> -->
              </el-checkbox-group>
            </el-form-item>
          </el-form>
          <div class="btns" v-if="operateType != 1">
            <el-button @click="quit">取消</el-button>
            <el-button type="primary" @click="handleSubmit">提交报价</el-button>
          </div>
          <el-tabs
            ref="tabRef"
            v-model="activeName"
            @tab-click="handleClick"
          >
            <!-- <el-tab-pane
              label="原厂件"
              name="first"
              v-if="isProvideTypes.find(ele => ele == 1)"
            ></el-tab-pane>
            <el-tab-pane
              label="拆车件"
              v-if="isProvideTypes.find(ele => ele == 4)"
              name="fourth"
            ></el-tab-pane> -->
            <el-tab-pane
              label="品牌件"
              v-if="isProvideTypes.find(ele => ele == 2)"
              name="second"
            ></el-tab-pane>
            <!-- <el-tab-pane
              label="其他"
              v-if="isProvideTypes.find(ele => ele == 3)"
              name="third"
            ></el-tab-pane> -->
          </el-tabs>
          <ele-table
            ref="domTable"
            :key="materialDetail.materialCode"
            :column="operateType == 1 ? domColumn_ : domColumn"
            :mockdata="currentPartsData"
            :operateList="operateList"
            @handleOperateEvent="handleOperateEvent"
          >
          </ele-table>
          
        </div>
        <quotationFormDrawer
          :materialDetail='materialDetail'
          :materialType="provideTypeList.find(ele => ele.code == activeName).value"
          @addData="addAfterEditCompeleted"
          @updateList="updateList"
          ref="quotationFormDrawerRef"
        />
      </el-drawer>
      <el-image-viewer
        v-if="showViewer"
        :zIndex='99999'
        :on-close="closeViewer"
        :url-list="showViewerImages"
        :initialIndex="initialIndex"
      />
    </div>
  </template>
  <script>
  import { operateList, rowConfig, formDescDialogMinxin } from './quotationConfig'
  import { mesPcQuotationSave, mesPcQuotationUpdate, mesPcQuotationResult } from '@/api/materials/supplier.js'
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  import quotationFormDrawer from './quotationForm.vue'
  import { mesTmMaterialBrandPage } from "@/api/materials/brand";
import { materialDialog } from '@/views/process/mesProcessMaterial/materialMixin';
// import { materialDialog } from '@/views/process/mesProcessMaterial/materialMixin'
// import { is } from 'core-js/core/object'
  export default {
    // mixins: [formDescDialogMinxin],
    components: {
      ElImageViewer,
      quotationFormDrawer
    },
    data() {
      const self = this;
      return {
        visible: false,
        detailId: null,
        materialDetail: {
          materialCode: '',
          vinCode: '',
          materialName: '',
          materialPhotoUrl: '',
          createTime: '',
          unit: ''
        },
        currentMaterialNum: 0,
        operateType: 0,
        drawer: false,
        showViewer: false,
        initialIndex: 0,
        showViewerImages: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'
        ],
        isProvideTypes: ['2'],
        provideTypeList: [
          {
            name: '原厂件',
            dataName: 'originalPartsFormData',
            code: 'first',
            value: 1,
            hasBrand: false,
          },
          {
            name: '拆车件',
            dataName: 'dismantlingPartsFormData',
            code: 'fourth',
            value: 4,
            hasBrand: false,
          },
          {
            name: '品牌件',
            code: 'second',
            dataName: 'qualityPartsFormData',
            value: 2,
            hasBrand: true,
          },
          {
            name: '其他',
            dataName: 'othersFormData',
            code: 'third',
            value: 3,
            hasBrand: true,
          }
        ],
        originalPartsFormData: [],
        dismantlingPartsFormData: [],
        qualityPartsFormData: [],
        othersFormData: [],
        activeName: 'second',
        domColumn: [
          {
            type: 'selection',
            fixed: 'left'
          },
          {
            type: 'index',
            label: $i18n.t('common.order'),
            width: 60,
            fixed: 'left'
          },
          // {
          //   prop: 'brand',
          //   label: $i18n.t("supplier.brand"),
          //   optionProp: {
          //     value: 'id',
          //     label: 'brand',
          //   },
          //   showOverflowTooltip: true,
          //   option: async () => {
          //     const list = await mesTmMaterialBrandPage({
          //       pageNum: 1,
          //       pageSize: 1000000,
          //       materialCode: self.materialDetail.materialCode
          //     })
          //     return list.data.result.records
          //   },
          // },
          {
            prop: 'brand',
            label: $i18n.t("supplier.brand"),
            showOverflowTooltip: true,
            
            // render: (h, scope) => {
            //   return <span>{ self.brandList.find(ele => ele.id == scope.row.brand)?.brand || ''}</span>
            // }
          },
          {
            prop: 'materialUnit',
            label: '规格',
            showOverflowTooltip: true
          },
          {
            prop: 'unitPrice',
            label: $i18n.t("supplier.unitPrice"),
            showOverflowTooltip: true
          },
          {
            prop: 'freight',
            label: $i18n.t("supplier.freight"),
            showOverflowTooltip: true
          },
          {
            prop: 'num',
            label: $i18n.t("supplier.quantity"),
            showOverflowTooltip: true
          },
          {
            prop: 'totalPrice',
            label: $i18n.t("supplier.totalPrice"),
            showOverflowTooltip: true
          },
          {
            prop: 'arrivalDays',
            label: $i18n.t("supplier.arrivalDays"),
            showOverflowTooltip: true
          },
          {
            prop: 'deliveryMode',
            label: $i18n.t("supplier.deliveryMethod"),
            showOverflowTooltip: true
          },
          {
            prop: 'remarks',
            label: $i18n.t("supplier.remarks"),
            showOverflowTooltip: true
          },
          {
            prop: 'pictureList',
            label: $i18n.t('bomBuyer.picture'),
            showOverflowTooltip: true,
            render: (h, scope) => {
              let _dom = []
              if (scope.row.pictureList && scope.row.pictureList.length) {
                _dom.push(
                  <el-link
                    type="primary"
                    onClick={() => {
                      this.showImgViewer(scope.row.pictureList)
                    }}
                  >
                    {$i18n.t('common.view')}
                  </el-link>
                )
              } else {
                _dom.push(<span>-</span>)
              }
              console.log('_dom', _dom)
              return _dom
            }
          },
          {
            prop: 'operate',
            label: $i18n.t('common.operation'),
            width: 200,
            fixed: 'right',
            render: (h, scope) => {
              return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
            }
          }
        ],
        domColumn_: [
          {
            type: 'selection',
            fixed: 'left'
          },
          {
            type: 'index',
            label: $i18n.t('common.order'),
            width: 60,
            fixed: 'left'
          },
          // {
          //   prop: 'brand',
          //   label: $i18n.t("supplier.brand"),
          //   optionProp: {
          //     value: 'id',
          //     label: 'brand',
          //   },
          //   showOverflowTooltip: true,
          //   option: async () => {
          //     const list = await mesTmMaterialBrandPage({
          //       pageNum: 1,
          //       pageSize: 1000000,
          //       materialCode: self.materialDetail.materialCode
          //     })
          //     return list.data.result.records
          //   },
          // },
          {
            prop: 'brand',
            label: $i18n.t("supplier.brand"),
            showOverflowTooltip: true,
            
            // render: (h, scope) => {
            //   return <span>{ self.brandList.find(ele => ele.id == scope.row.brand)?.brand || ''}</span>
            // }
          },
          {
            prop: 'materialUnit',
            label: '规格',
            showOverflowTooltip: true
          },
          {
            prop: 'unitPrice',
            label: $i18n.t("supplier.unitPrice"),
            showOverflowTooltip: true
          },
          {
            prop: 'freight',
            label: $i18n.t("supplier.freight"),
            showOverflowTooltip: true
          },
          {
            prop: 'num',
            label: $i18n.t("supplier.quantity"),
            showOverflowTooltip: true
          },
          {
            prop: 'totalPrice',
            label: $i18n.t("supplier.totalPrice"),
            showOverflowTooltip: true
          },
          {
            prop: 'arrivalDays',
            label: $i18n.t("supplier.arrivalDays"),
            showOverflowTooltip: true
          },
          {
            prop: 'deliveryMode',
            label: $i18n.t("supplier.deliveryMethod"),
            showOverflowTooltip: true
          },
          {
            prop: 'remarks',
            label: $i18n.t("supplier.remarks"),
            showOverflowTooltip: true
          },
          {
            prop: 'pictureList',
            label: $i18n.t('bomBuyer.picture'),
            showOverflowTooltip: true,
            render: (h, scope) => {
              let _dom = []
              if (scope.row.pictureList && scope.row.pictureList.length) {
                _dom.push(
                  <el-link
                    type="primary"
                    onClick={() => {
                      this.showImgViewer(scope.row.pictureList)
                    }}
                  >
                    {$i18n.t('common.view')}
                  </el-link>
                )
              } else {
                _dom.push(<span>-</span>)
              }
              console.log('_dom', _dom)
              return _dom
            }
          },
          {
            prop: 'quoStatusStr',
            label: '状态',
            showOverflowTooltip: true,
          },
          {
            prop: 'rejectReason',
            label: '驳回原因',
            showOverflowTooltip: true,
          },
          {
            prop: 'rejectPictures',
            label: '驳回图片',
            showOverflowTooltip: true,
            render: (h, scope) => {
              let _dom = []
              if (scope.row.rejectPictures) {
                _dom.push(
                  <el-link
                    type="primary"
                    onClick={() => {
                      this.showImgViewer(scope.row.rejectPictures.split(','))
                    }}
                  >
                    {$i18n.t('common.view')}
                  </el-link>
                )
              } else {
                _dom.push(<span>-</span>)
              }
              console.log('_dom', _dom)
              return _dom
            }
          },
          // {
          //   prop: 'operate',
          //   label: $i18n.t('common.operation'),
          //   width: 200,
          //   fixed: 'right',
          //   render: (h, scope) => {
          //     return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
          //   }
          // }
        ],
        currentPartsData: {
          records: [],
          total: 0
        },
        originDetails: [],
        operateList_: operateList,
        brandList: []
      }
    },
    props: {
      materialNum: {
        type: Number,
        default: 0,
      }
    },
    watch: {
      isProvideTypes: {
        handler(val,oldVal) {
          console.log('val:', val, 'oldVal', oldVal)
          if(oldVal === undefined ) { 
            this.activeName = this.provideTypeList.find(ele => ele.value == val[0]).code
            return 
          }
          if(val.length > oldVal.length) {
            this.activeName = this.provideTypeList.find(ele => ele.value == val[val.length -1]).code
          }  else {
            let currentUnCheckedValue = oldVal.find(oldEle => {
              let find = val.find(ele => ele === oldEle)
              return find === undefined
            })
            let clearObj = null
            if(currentUnCheckedValue == 1 && this.originalPartsFormData.length) {
              clearObj = 'originalPartsFormData'
            } else if (currentUnCheckedValue == 2 && this.qualityPartsFormData.length) {
              clearObj = 'qualityPartsFormData'
            } else if(currentUnCheckedValue == 3 && this.othersFormData.length) {
              clearObj = 'othersFormData'
            } 
            else if(currentUnCheckedValue == 4 && this.dismantlingPartsFormData.length) {
              clearObj = 'dismantlingPartsFormData'
            } 
            if(clearObj) {
              this.$confirm('此操作将删除当前物料类别下的所有报价记录, 是否继续?', $i18n.t('common.tip'), {
                confirmButtonText: $i18n.t('common.ok'),
                cancelButtonText: $i18n.t('common.cancel'),
                type: 'warning'
              }).then(() => {
                this[clearObj] = []
                if(val.length) {
                  this.activeName = this.provideTypeList.find(ele => ele.value == val[0])?.code || 'first'
                }
                this.getTableData()
              }).catch(() => {
                this.isProvideTypes.push(currentUnCheckedValue)
              })
            }
            
          }
          this.$nextTick(() => {
            this.getTableData()
          })
          
        },
        immediate: true
      }
    },
    computed: {
      operateList() {
        if(this.operateType == 1) {
          return []
        } else {
          return this.operateList_
        }
      },
      drawerTitle() {
        return this.operateType == 1 ? $i18n.t('supplier.viewQuotation') : $i18n.t('supplier.quotation') 
      },
      disabled() {
        return this.operateType == 1 ? true : false
      },
    },
    mounted() {
    },
    methods: {
      isProvideChange() {
      },
      getBrandList() {
        mesTmMaterialBrandPage({
          pageNum: 1,
          pageSize: 9999999,
          materialCode: this.materialDetail.materialCode
        }).then(res => {
          this.brandList = res.data.result.records
        })
      },
      addAfterEditCompeleted(data) {
        console.log('接收到了添加数据', data)
        let currentType = this.provideTypeList.find(ele => ele.code == this.activeName)
        this.createAddData(currentType.value, data)
      },
      updateList(data) {
        console.log(this.currentPartsData, data)
        let data_ = {
          ...data,
          "pictureList": (data.pictureList && data.pictureList.length) ? data.pictureList.map(ele => ele.path) : []
        }
        if (this.activeName == 'first') {
          this.originalPartsFormData[data.index] = data_
        }
        if (this.activeName == 'second') {
          this.qualityPartsFormData[data.index] = data_
        }
        if (this.activeName == 'third') {
          this.othersFormData[data.index] = data_
        }
        if(this.activeName == 'fourth') {
          this.dismantlingPartsFormData[data.index] = data_
        }
        this.getTableData()
      },
      getTableData() {
        if (this.activeName == 'first') {
          this.currentPartsData = {
            records: this.originalPartsFormData.map((ele, index) => { return {...ele, index: index} }),
            total: this.originalPartsFormData.length
          }
        }
        if (this.activeName == 'second') {
          this.currentPartsData = {
            records: this.qualityPartsFormData.map((ele, index) => { return {...ele, index: index} }),
            total: this.qualityPartsFormData.length
          }
        }
        if (this.activeName == 'third') {
          this.currentPartsData = {
            records: this.othersFormData.map((ele, index) => { return {...ele, index: index} }),
            total: this.othersFormData.length
          }
        }
        if(this.activeName == 'fourth') {
          this.currentPartsData = {
            records: this.dismantlingPartsFormData.map((ele, index) => { return {...ele, index: index} }),
            total: this.dismantlingPartsFormData.length
          }
        }
        this.$nextTick(() => {
          this.$refs.domTable.getMockData()
        })
        
      },
      handleClick() {
        // console.log('activeName', this.activeName)
        this.$refs.tabRef.setCurrentName(this.activeName)
        
        this.getTableData()
      },
      // 表格顶部按钮操作事件
      handleOperateEvent(data) {
        this.title = data.name
        const fnc = {
          add: () => {
            if(this.isProvideTypes.find(ele => ele != null) === undefined) {
              this.$message({
                message: '您未勾选任何有货的物料类型，请先勾选',
                type: 'error'
              })
              return
            }
            let  currentTypeValue = this.provideTypeList.find(ele => ele.code == this.activeName).value
            if(this.isProvideTypes.find(ele => ele == currentTypeValue)){
              if((this.activeName == 'first' || this.activeName == 'fourth') && this.currentPartsData.records.length > 0) {
                this.$message({
                  message: '当前物料类型最多只能添加一条数据',
                  type: 'error'
                })
                return
              }
              this.$refs.quotationFormDrawerRef.operateType = 0
              this.$refs.quotationFormDrawerRef.materialCode = this.materialDetail.materialCode
              this.$refs.quotationFormDrawerRef.showDrawer()
              
              
              
            } else {
              this.$message({
                message: '请先于tab栏选择要添加的物料类型',
                type: 'error'
              })
              return
            }
            
          },
          deleteBatch: () => {
            this.$confirm('此操作将删除所选数据, 是否继续?', $i18n.t('common.tip'), {
              confirmButtonText: $i18n.t('common.ok'),
              cancelButtonText: $i18n.t('common.cancel'),
              type: 'warning'
            }).then(() => {
              const ids = data.rows.map((val) => val.id).join(',')
              this.rowDel(ids)
            })
          },
        }
        fnc[data.handleName]()
      },
      // 表格行操作事件
      rowOperate({ handleName, name, row, index }) {
        this.title = name
        const fnc = {
          edit: () => {
            let data = {
              ...row,
              pictureList: row.pictureList.map(ele => { return {path: ele, src: ele}})
            }
            console.log(data)
            this.$refs.quotationFormDrawerRef.currentFormData = { ...data }
            this.$refs.quotationFormDrawerRef.operateType = 1
            this.$refs.quotationFormDrawerRef.materialCode = this.materialDetail.materialCode
            this.$refs.quotationFormDrawerRef.showDrawer()
            
            
          },
          delete: () => {
            this.$confirm('此操作将删除所选数据, 是否继续?', $i18n.t('common.tip'), {
              confirmButtonText: $i18n.t('common.ok'),
              cancelButtonText: $i18n.t('common.cancel'),
              type: 'warning'
            }).then(() => {
              this.deleteItem(row)
            })
          }
        }
        fnc[handleName]()
      },
      //关闭图片预览弹框
      closeViewer() {
        this.showViewer = false
        this.initialIndex = 0
      },
      //图片预览展示
      showImgViewer(pic = null) {
        this.showViewer = true
        this.showViewerImages = pic ? pic : (this.materialDetail.materialPhotoUrl?.split(',') || [])
        console.log(this.showViewerImages)
      },
      showDrawer() {
        this.drawer = true
        if(this.operateType == 1 || this.operateType == 3) {
          this.getDetails()
        }
        if(this.operateType == 0) {
          console.log(this.materialDetail)
          this.qualityPartsFormData = [{
            materialType: 2,
            detailId: this.materialDetail.id,
            num: Number(this.materialDetail.materialNum),
            brand: this.materialDetail.materialBrand,
            materialUnit: this.materialDetail.materialUnit,
            pictureList: [],
            isProvide: 1
          }]
          this.getTableData()
        }
      },
      getDetails() {
        mesPcQuotationResult({demandId: this.detailId}).then(res => {
          if(res.data.code == 0) {
            let dataArr = res.data.result
            this.originDetails = res.data.result
            dataArr.forEach(ele => {
              if(ele.materialType == 1) {
                if(ele.quotationList && ele.quotationList.length && ele.quotationList[0].isProvide) {
                  this.$set(this.isProvideTypes, 0, '1')
                } else {
                  this.$set(this.isProvideTypes, 0, null)
                  return
                }
                this.originalPartsFormData = ele.quotationList.map(ele => {
                  return {
                    ...ele,
                    pictureList: (ele.pictureList && ele.pictureList.length) ? ele.pictureList.map(ele => ele) : []
                  }
                })
                console.log('获取详情生成的：', this.originalPartsFormData)
              }
  
              if(ele.materialType == 2) {
                if(ele.quotationList && ele.quotationList.length && ele.quotationList[0].isProvide) {
                  this.$set(this.isProvideTypes, 2, '2')
                } else {
                  this.$set(this.isProvideTypes, 2, null)
                  return
                }
                this.qualityPartsFormData = ele.quotationList.map(ele => {
                  delete ele.isPass
                  return {
                    ...ele,
                    materialUnit: this.materialDetail.materialUnit,
                    pictureList: (ele.pictureList && ele.pictureList.length) ? ele.pictureList.map(ele => ele) : []
                  }
                })
              }
  
              if(ele.materialType == 3) {
                if(ele.quotationList && ele.quotationList.length && ele.quotationList[0].isProvide) {
                  this.$set(this.isProvideTypes, 3, '3')
                } else {
                  this.$set(this.isProvideTypes, 3 , null)
                  return
                }
                this.othersFormData = ele.quotationList.map(ele => {
                  return {
                    ...ele,
                    pictureList: (ele.pictureList && ele.pictureList.length) ? ele.pictureList.map(ele => ele) : []
                  }
                })
              }
              if(ele.materialType == 4) {
                if(ele.quotationList && ele.quotationList.length && ele.quotationList[0].isProvide) {
                  this.$set(this.isProvideTypes, 1, '4')
                } else {
                  this.$set(this.isProvideTypes, 1, null)
                  return
                }
                this.dismantlingPartsFormData = ele.quotationList.map(ele => {
                  return {
                    ...ele,
                    pictureList: (ele.pictureList && ele.pictureList.length) ? ele.pictureList.map(ele => ele) : []
                  }
                })
              }
              
            })
            
            this.$nextTick(() => {
              this.activeName = this.provideTypeList.find(ele => {
                return ele.value == this.isProvideTypes.find(ele => ele)
              })?.code || 'first'
              this.getTableData()
            })
          }
        })
      },
      deleteItem(row) {
        let deleteData = null
        if(row.materialType == 1) {
          deleteData = this.originalPartsFormData
        }
        else if(row.materialType === 2) {
          deleteData = this.qualityPartsFormData
        } else if(row.materialType === 3) {
          deleteData = this.othersFormData
        } else {
          deleteData = this.dismantlingPartsFormData
        }
        let index = deleteData.indexOf(row)
        deleteData.splice(index, 1)
        this.getTableData()
      },
      quit() {
        this.isProvideTypes = ['2']
        this.originalPartsFormData = []
        this.dismantlingPartsFormData = []
        this.qualityPartsFormData = []
        this.othersFormData = []
        this.drawer = false
        this.getTableData()
      },
      // 验证所有组件的内置验证方法
      validateComponent() {
        let allForm = []
        this.isProvideTypes.forEach((ele, index) => {
          allForm.push(this.$refs[`validateForm${index}`])
        })
        this.originalPartsFormData.forEach((ele, index) => {
          allForm.push(this.$refs[`validateForm${'1' + index}`][0])
        })
        this.qualityPartsFormData.forEach((ele, index) => {
          allForm.push(this.$refs[`validateForm${'2' + index}`][0])
        })
        this.othersFormData.forEach((ele, index) => {
          allForm.push(this.$refs[`validateForm${'3' + index}`][0])
        })
        this.dismantlingPartsFormData.forEach((ele, index) => {
          allForm.push(this.$refs[`validateForm${'4' + index}`][0])
        })
  
        console.log('forms', allForm)
        const validators = allForm.filter(form => form)
          .map((form) => form.validateForm)
          .filter(Boolean);
        console.log('validators', validators)
  
        return Promise.all(validators.map((fn) => fn()));
      },
      createAddData(type, data) {
        if(type == 1) {
          this.originalPartsFormData.push({
            "detailId": this.detailId,
            "materialType": 1,
            ...data,
            isProvide: 1,
            "pictureList": (data.pictureList && data.pictureList.length) ? data.pictureList.map(ele => ele.path) : []
          })
          console.log('新增生成的:' ,this.originalPartsFormData)
        }
        if(type == 2) {
          this.qualityPartsFormData.push({
            "detailId": this.detailId,
            "materialType": 2,
            ...data,
            isProvide: 1,
            "pictureList": (data.pictureList && data.pictureList.length) ? data.pictureList.map(ele => ele.path) : []
          })
        }
        if(type == 3) {
          this.othersFormData.push({
            "detailId": this.detailId,
            "materialType": 3,
            ...data,
            isProvide: 1,
            "pictureList": (data.pictureList && data.pictureList.length) ? data.pictureList.map(ele => ele.path) : []
          })
        }
        if(type == 4) {
          this.dismantlingPartsFormData.push({
            "detailId": this.detailId,
            "materialType": 4,
            ...data,
            isProvide: 1,
            "pictureList": (data.pictureList && data.pictureList.length) ? data.pictureList.map(ele => ele.path) : []
          })
        }
        this.getTableData()
      },
      createUpdateDataEle(typeValue, typeDataName) {
        let data = []
        if(this[typeDataName].length && this.isProvideTypes.includes(String(typeValue))) {
          data = data.concat(this[typeDataName])
        } else {
          let currentTypeData = this.originDetails.find(ele => ele.materialType == typeValue).quotationList
          if(currentTypeData[0].isProvide) {
            currentTypeData.forEach(ele => {
              data.push({
                id: ele.id,
                detailId: this.detailId,
                materialType: 1,
                isProvide: 0
              })
            })
          } else {
            currentTypeData.forEach(ele => {
              data.push(ele)
            })
          }
        }
        return data
      },
      createUpdateDataAll() {
        let data = []
        this.provideTypeList.forEach(ele => {
          data = data.concat(this.createUpdateDataEle(ele.value, ele.dataName)) 
        })
        return data
      },
      createSubmitData() {
        let data = []
        if(this.originalPartsFormData.length && this.isProvideTypes.includes('1')) {
          data = data.concat(this.originalPartsFormData)
        } else {
          data.push({
            orderType: 0,
            detailId: this.detailId,
            materialType: 1,
            isProvide: 0
          })
        }
        if(this.qualityPartsFormData.length && this.isProvideTypes.includes('2')) {
          data = data.concat(this.qualityPartsFormData)
        } else {
          data.push({
            orderType: 0,
            detailId: this.detailId,
            materialType: 2,
            isProvide: 0
          })
        }
        if(this.othersFormData.length && this.isProvideTypes.includes('3')) {
          data = data.concat(this.othersFormData)
        } else {
          data.push({
            orderType: 0,
            detailId: this.detailId,
            materialType: 3,
            isProvide: 0
          })
        }
        if(this.dismantlingPartsFormData.length  && this.isProvideTypes.includes('4')) {
          data = data.concat(this.dismantlingPartsFormData)
        } else {
          data.push({
            orderType: 0,
            detailId: this.detailId,
            materialType: 4,
            isProvide: 0
          })
        }
        let returnData = 
        data.map(ele => {
          if(ele.id) {
            return {
              ...ele,
              id: null,
              rejectReason: null,
              rejectPictures: ''
            }
          } else {
            return ele
          }
        })
        return returnData
      },
      handleSubmit() {
        this.$confirm("提交报价数据后将不能修改, 是否继续?", $i18n.t('common.tip'), {
          confirmButtonText: $i18n.t('common.ok'),
          cancelButtonText: $i18n.t('common.cancel'),
          type: 'warning'
        }).then(res => {
          let data = this.createSubmitData()
          let api
          if(this.operateType == 0) {
            api = mesPcQuotationSave
          }
          if(this.operateType == 3) {
            api  = mesPcQuotationUpdate
          }
          console.log(data)
          api(data).then(res => {
            if(res.data.code == 0) {
              this.$message.success(this.$t("common.submitSuccess"))
              this.$emit('updateList')
              this.drawer = false
            } else {
              this.$message.error(res.data.message)
            }
          })
        }).catch(err => {
          console.log(err)
        })
      },
      clearDialog() {
        this.quit()
      },
      handleClose() {
        this.quit()
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .drawer-main {
    /deep/.el-drawer__body {
      padding: 0 20px;
    }
    .detail-info-main {
      .info-main {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 20px;
        .info-item {
          // width: 40%;
          display: flex;
          margin-bottom: 10px;
          margin-right: 80px;
          font-size: 14px;
          text-align: center;
          .link {
            width: 100%;
            text-align: center;
            cursor: pointer;
            color: #0066ff;
          }
        }
        .item-full {
          width: 100%;
        }
      }
    }
      .info-main {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 20px;
        .info-item {
          // width: 40%;
          display: flex;
          margin-bottom: 10px;
          margin-right: 40px;
          font-size: 14px;
          text-align: center;
          .link {
            width: 100%;
            text-align: center;
            cursor: pointer;
            color: #0066ff;
          }
        }
        .item-full {
          width: 100%;
        }
      }
  }
  .materialType-title {
    font-weight: bold;
    line-height: 30px;
    padding-left: 20px;
    background-color: #ddd;
    margin-bottom: 10px;
  }
  .form-section {
    width: 100%;
    position: relative;
    
    .form-div {
      position: relative;
      border-top: solid 2px #ccc;
      padding-top: 40px;
    }
    .form-div-first-child {
      border-top: none;
      padding-top: 0;
    }
    .icon-position {
      position: absolute;
      top: 6px;
      right: 0;
      color: #0066ff;
      font-size: 20px;
      cursor: pointer;
      z-index: 9999;
    }
  }
  .btns {
    margin: 0 0 -10px 0;
    text-align: right;
    
  }
  </style>